<template>
  <view class="main">
    <image
      src="https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/2.png"
      alt=""
      class="bgImage"
    />
    <view class="header">
      <view class="headerBox">
        <image
          src="https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/qianjin.png"
          alt=""
        />
      </view>
    </view>

    <view class="middle">
      <view class="loginBox">
        <view>您好，欢迎来到仟金传家</view>
        <view class="userAvatar">
          <image
            class="avatar"
            :src="userDatas?.avatar"
            alt=""
            @click="toUserData"
            v-if="userDatas?.avatar"
          />
          <image
            class="avatar"
            src="https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/defaultAvatar.png"
            alt=""
            @click="login"
            v-else
          />
          <view class="iconBox">
            <image
              src="https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/icon-10.png"
              alt=""
              @click="share"
            />

            <image
              src="https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/friend.png"
              alt=""
              @click="toFriendPage"
            />
          </view>
        </view>
        <view class="userName" @click="toUserData" v-if="userDatas?.nickname">
          {{ userDatas?.nickname }}
        </view>
        <view class="userName" @click="login" v-else>登录/注册</view>
      </view>
      <view class="middleBox">
        <view class="list">
          <view class="listBtn" @click="toUserOrderList"></view>
          <view class="listBtn" @click="toUserPoints"></view>
        </view>
        <view class="list list-2">
          <view class="listBtn" @click="toMyOrder"></view>
          <view class="listBtn" @click="toInterestPage"></view>
          <view class="listBtn" @click="toInterestPage"></view>
        </view>
        <view class="toDiscoverPage" @click="toExploreQJ">
          <image
            src="https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/discover-icon.png"
            alt=""
          />
        </view>
      </view>
      <view class="bottomBox">
        <image
          src="https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/btn-1.png"
          alt=""
        />
        <image
          src="https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/btn-2.png"
          alt=""
          @click="toBills"
        />
      </view>
      <view class="exit" @click="exit">退出登录</view>
    </view>
    <view class="bottom">
      <view class="discover" @click="toDiscover"></view>
      <view class="home" @click="toHome"></view>
      <view class="mine"></view>
    </view>
<!--    <van-dialog
	use-slot
      v-model:show="showDialog"
      :showConfirmButton="false"
      closeOnClickOverlay
      width="60%"
    >
	<image src="https://img.yzcdn.cn/1.jpg" />
    </van-dialog> -->
	
	<van-dialog
	width='70vw'
	  use-slot
	  :show="showDialog"
	  :show-confirm-button="false"
	  :closeOnClickOverlay='true'
	  @close="close"
	>
      <view class="dialogTop">
        <image class="avatar" :src="userDatas?.avatar" alt="" />
        <text>{{ userDatas?.nickname }}</text>
        <text>ID：{{ userDatas?.id }}</text>
      </view>
      <image
        class="QRcode"
        src="https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/QRcode.png"
        alt=""
      />
	  <!-- <image src="https://img.yzcdn.cn/1.jpg" /> -->
	</van-dialog>
  </view>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
// import { useStore } from "../../store/index";
// import { userData } from "../../api/api";

const showDialog = ref(false);
const router = useRouter();
const route = useRoute();
const userDatas = ref();



onMounted(() => {
	// console.log(getCurrentPages().route);
	
  userData().then((res) => {
    userDatas.value = res.data;
  });
});


const close = ()=>{
	console.log('222')
	showDialog.value = false
}
const toHome = () => {
		uni.navigateTo({
		    url: '/pages/index/index'
		})
};
const toDiscover = () => {
		uni.reLaunch({
		    url: '/pages/discover/index'
		})
};
const toUserPage = () => {
  router.push({
    name: "UserHomePage",
  });
};
const toExploreQJ = () => {
  router.push({
    name: "ExploreQJ",
  });
};
const toInterestPage = () => {
  router.push({
    name: "InterestPage",
  });
};
const toMyOrder = () => {
  router.push({
    name: "MyOrder",
  });
};
const login = () => {
  router.push({
    name: "Login",
  });
};
const toUserOrderList = () => {
  router.push({
    name: "UserOrderList",
    query: {
      userId: userDatas.value.id,
    },
  });
};
const toUserPoints = () => {
  router.push({
    name: "UserPoints",
    query: {
      userId: userDatas.value.id,
      points: userDatas.value.point,
    },
  });
};
const toBills = () => {
  router.push({
    name: "Bills",
    query: {
      userId: userDatas.value.id,
    },
  });
};
const toFriendPage = () => {
  router.push({
    name: "Friend",
    query: {
      userId: userDatas.value.id,
    },
  });
};
const share = () => {
	  console.log(showDialog.value)
	console.log('1111')
  showDialog.value = true;
  console.log(showDialog.value)
};
const toUserData = () => {
  router.push({
    name: "UserData",
    query: {
      userId: userDatas.value.id,
    },
  });
};
const exit = () => {
  localStorage.removeItem("clientAccessToken");
  router.push({
    name: "Login",
  });
};
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  width: 100vw;
  height: 100vh;
  background-color: $sys_theme;
  color: $color-text;
  .header {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 99999999;
    height: 10.41vh;
    width: 100%;
    .headerBox {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 48.7%;
      image {
        height: 4.68vh;
        width: 27.73vw;
      }
    }
  }
  .middle {
    box-sizing: border-box;
    z-index: 200;
    overflow: scroll;
    overflow-x: hidden;
    height: 79.37vh;
    width: 100%;
    padding: 0 4vw;

    .loginBox {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      // box-sizing: border-box;
      width: 100%;
      height: 13.48vh;
      padding: 1.42vh 0;
      .userAvatar {
		  display: flex;
		  align-items: center;
		  justify-content: center;
        position: relative;
        width: 100%;
        height: 14.8vw;

        overflow: hidden;
        .avatar {
          width: 14.8vw;
          height: 14.8vw;
          border-radius: 100%;
        }
        .iconBox {
          position: absolute;
          top: 0;
          right: 0;
          image {
            width: 5.33vw;
			height: 5.33vw;
            margin-top: 0.37vh;
            margin-left: 3.87vw;
          }
        }
      }
      .userName {
        padding-bottom: 0.12vh;
        border-bottom: 0.12vh solid $color-text;
        // -webkit-text-fill-color: transparent;
      }
    }
    .middleBox {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 41.93vh;
      .list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        overflow: hidden;
        box-shadow: 0px 6px 6px 1px rgba(0, 0, 0, 0.28);
        height: 11.576vh;
        width: 100%;
        padding: 0 10.66vw;
        border-radius: 2.8vw;
        background: url("https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/bg-2.png")
          no-repeat center center;
        background-size: cover;
        .listBtn {
          height: 3.7vh;
          width: 25vw;
          opacity: 0;
        }
      }
      .list-2 {
        background: url("https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/bg-3.png")
          no-repeat center center;
        background-size: cover;
        .listBtn {
          // background-color: red;
          height: 8vh;
          width: 19vw;
          // opacity: 1;
        }
      }
      .toDiscoverPage {
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        box-sizing: border-box;
        padding: 0.74vh 2.67vw;
        height: 16.63vh;
        width: 100%;
        border-radius: 2.8vw;
        box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.36);
        background: url("https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/bg-4.png")
          no-repeat center center;
        background-size: cover;
        image {
          width: 16.8vw;
		  height: 1.79vh;
        }
      }
    }
    .bottomBox {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 12.25vh;
      width: 100%;
      margin-top: 1.91vh;
      image {
        width: 100%;
        height: 5.48vh;
      }
    }
    .exit {
		text-align: center;
      font-size: $font-size-small-s;
      margin-top: 4.25vh;
    }
  }
  .bottom {
    position: relative;
    height: 10.22%;
    background: url("https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/bottom-3.png")
      no-repeat center center;
    background-size: cover;
    box-shadow: 0px -5px 9px 1px rgba(0, 0, 0, 0.27);
    .discover,
    .mine {
      opacity: 0;
      position: absolute;
      top: 36%;
      right: 14%;
      height: 25%;
      width: 10.5%;
    }
    .discover {
      right: 75%;
    }
    .home {
      opacity: 0;
      position: absolute;
      top: 10%;
      right: 44%;
      height: 54%;
      width: 12%;
      border-radius: 50%;
    }
  }
  .bgImage {
    position: absolute;
    top: 0;
    width: 100%;
	height: 30.79vh;
    border-radius: 0px 0px 2.67vw 2.67vw;
    box-shadow: 0px 8px 6px 1px rgba(0, 0, 0, 0.4);
    // height: 100%;
  }
}
::v-deep .van-popup--center {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	height: 100%;
  // position: relative;
  width: 30vw;
  height: 35.84%;
  border-radius: 2.67vw;
  padding: 1.54vh 12.4vw 2.53vh 12.4vw;
  .avatar {
    width: 14.8vw;
    height: 14.8vw;
    border-radius: 100%;
    box-shadow: 0px 5px 6px 1px rgba(0, 0, 0, 0.34);
  }
  text {
    margin-top: 0.86vh;
    font-size: $font-size-small;
    color: black;
  }
  .dialogTop {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .QRcode {
    width: 38.27vw;
	height: 38.27vw;
  }
}
</style>